在第2天時有練習到畫布拉大到全螢幕

var canvas = document.getElementById("cvs");
var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.fillStyle = '#f80';
ctx.fillRect(0, 0, canvas.width, canvas.height);

再加上 CSS 的

body{
  margin: 0;
}

就可以做到

但現在需要一個比視窗小的畫布尺寸又要置中時
就要移動畫布的位置並置中
這裡只需要 CSS 設定
作法有 2 個

都是要先把 行內元素 換成 區塊元素
因為 canvas 預設為 行內元素
若是還是用 行內元素 CSS 設定的話
畫布會沒反應

最簡單的置中

#cvs {
	display: block;
    margin: 0 auto;
}

但只能左右置中、靠上
如果只要置中
寫到這裡就夠了

若是左右、上下都要置中的話
就要用到 position 排版

#cvs {
    position: absolute;
    display: block;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

而且置中要微調也是可以在 "上下左右" 的值去做設定